<template>
    <div class="header">
        <p @click="collapse">
            <span v-if="isCollapse">header1</span>
            <span v-else>header2</span>
        </p>
    </div>
</template>

<script type="text/javascript">
    export default {
        name: "topHeader",
        data() {
            return {
                isCollapse: false
            }
        },
        methods: {
            // 更新侧边栏展开和关闭状态
            collapse () {
                let isCollapse = !this.isCollapse;
                this.$eventBus.emit('updateCollapse', {
                    status: isCollapse
                });
            }
        },
        mounted() {
            this.$eventBus.on('updateCollapseCb', (data) => {
                this.isCollapse = data.status;
            })
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .header {
        position: relative;
        z-index: 10;
        height: 64px;
        background: #fff;
        box-shadow: 0 1px 4px 0 rgba(0,21,41,0.12);
        @include pxAndLh(14);
    }
</style>
